<template>
	<view>
		<view class="cu-card article">
			<view class="cu-item shadow">
				<view class="flex solid-bottom padding justify-between">
					<view class="text-lg">
						<view style="background: #fff;">
							<view class="t-login">
								<u--form labelPosition="left" labelWidth="80" :model="carInfo" ref="uForm">
									<u-form-item label="VIN识别码" prop="vin" ref="item1" :required="true">
										<u--input type="text" disabled v-model="carInfo.vin" border="surround">
										</u--input>
									</u-form-item>
									<u-form-item label="发动机号" prop="engineNum" ref="item1" :required="true">
										<u--input type="text" disabled v-model="carInfo.engineNum" border="surround">
										</u--input>
									</u-form-item>
									<u-form-item label="验证码" prop="captcha" ref="item1" :required="true">
										<u--input type="text" v-model="carInfo.captcha" border="surround" />
									</u-form-item>
									<u-image v-if="src" width="100%" height="300rpx" :src="src"
										@click="refreshCaptcha"></u-image>
									<u-button type="primary" :loading="addLoading" :disabled="addLoading" text="查询"
										@click="submit"></u-button>
								</u--form>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAction,
		postAction,
		putAction
	} from '@/api/api.js';
	import config from '@/api/config.js'

	export default {
		data() {
			return {
				openId: '',
				src: '',
				addLoading: false,
				carInfo: {
					vin: '',
					engineNum: '',
					captcha: '',
				},
				urls: {
					start: '/api/vin/start',
					submit: '/api/vin/submit',
					refreshCaptcha: '/api/vin/refreshCaptcha',
					cleanup: '/api/vin/cleanup'
				},
			}
		},
		onLoad() {
			this.openId = uni.getStorageSync("openId")
			this.carInfo = uni.getStorageSync("carInfo")
			this.start()
		},
		onBackPress(){
			this.cleanup()
		},
		methods: {
			start() {
				let params = "?openId=" + this.openId + "&vin=" + this.carInfo.vin + "&engine=" + this.carInfo.engineNum
				getAction(this.urls.start + params).then((
				res) => {
					if (res.success) {
						this.src = config.baseUrl + "/" + res.result
					}
				})
			},
			submit() {
				this.addLoading = true
				let params = "?openId=" + this.openId + "&captcha=" + this.carInfo.captcha
				postAction(this.urls.submit + params).then((res) => {
					if (res.success) {
						console.log(res.result)
						if(res.result.error){
							uni.$u.toast("车辆未信息公开!请选择其他查询方式")
						} else {
							this.carInfo.carBrand = res.result.carBrand
							this.carInfo.carModel = res.result.carModel
							this.carInfo.engineManufacturer = res.result.engineManufacturer
							this.carInfo.engineType = res.result.engineType
							this.carInfo.evnType = res.result.evnType
							this.carInfo.evnType_dictText = res.result.evnType
							uni.setStorageSync("carInfo",this.carInfo)
						}
						this.cleanup()
						this.addLoading = false
						uni.navigateBack()
					}
				})
			},
			refreshCaptcha() {
				let params = "?openId=" + this.openId
				postAction(this.urls.refreshCaptcha + params).then((res) => {
					if (res.success) {
						this.src = config.baseUrl + "/" + res.result
					}
				})
			},
			cleanup() {
				let params = "?openId=" + this.openId
				postAction(this.urls.cleanup + params).then((res) => {
					if (!res.success) {
						this.cleanup()
					}
				})
			},

		}
	}
</script>

<style>
	.login-view {
		width: 100%;
		position: relative;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}
</style>